<template>
    <div class="clistPopup">
        <!-- 抄送列表 -->
        <el-dialog title="抄送邮箱列表" :visible.sync="dialogVisible" width="75%" top="5vh" custom-class="import-dialog" :close-on-click-modal="false">
            <div>
                <div>
                    <el-button type="primary" @click="handleBtn('新增')">新增</el-button>
                    <el-button type="danger" @click="handleBtn('删除')">删除</el-button>
                    <el-button type="primary" @click="handleBtn('查询')">查询</el-button>
                </div>
                <el-table 
                    :data="userList" 
                    tooltip-effect="dark" 
                    style="width: 100%;margin-top:10px" 
                    border 
                    size="mini"
                    height="270"
                    @selection-change="clauseChangeEvent"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="emailId" label="邮箱编号" width="130" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="emailName" label="名称" width="150" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="emailAddress" label="邮箱地址" width="230" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{dateFormat(scope.row.createDate) || ''}} {{timeFormat(scope.row.createTime) || ''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="modifyDate" label="修改时间" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{dateFormat(scope.row.modifyDate) || ''}} {{timeFormat(scope.row.modifyTime) || ''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <RiskIconButton
                                type="primary"
                                icon="el-icon-edit"
                                topTitle="修改"
                                @on-click="handleBtn('编辑', scope.row)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                icon="el-icon-delete"
                                topTitle="删除"
                                @on-click="handleRemove(scope.row, '单个删除')"
                            ></RiskIconButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <risk-pagination :paging="popUpList.paging" @page-change="pageRet"></risk-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <template>
            <el-dialog :title="title + '抄送邮箱'" :visible.sync="editCheckVisible" width="30%" custom-class="import-dialog" :close-on-click-modal="false">
            <div>
                <el-form :inline="true" :model="popUpList" :label-position="right" label-width="100px">
                    <el-row class="form-row">
                        <el-col :span="24">
                            <el-form-item label="邮箱编号" v-if="title == '查询'">
                                <el-input v-model="popUpList.emailId" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="form-row">
                        <el-col :span="24">
                            <el-form-item label="名称">
                                <el-input v-model="popUpList.emailName" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="form-row">
                        <el-col :span="24">
                            <el-form-item label="邮箱地址">
                                <el-input v-model="popUpList.emailAddress" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleEditCheck('cancel')">取 消</el-button>
                <el-button type="primary" @click="handleEditCheck('comfirm')">确 定</el-button>
            </span>
        </el-dialog>
        </template>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { dateFormat, timeFormat } from '@/utils/tools';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'ClistPopup',
    components: {
        RiskIconButton,
        RiskPagination
    },
})
export default class ClistPopup extends Vue {
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    @Prop() editDivisible;
    private dialogVisible: boolean = false;
    private editCheckVisible: boolean = false;
    private multipleitem = [];
    private title: string = '';
    private userList = []
    private popUpList = {
        emailId: '',
        emailName: '',
        emailAddress: '',
        paging: {
            currentPage: 1,
            pageSize: 50,
            total: 0,
        }
    }
    private groupPage: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    @Watch('editDivisible')
    watchCategoryNodeDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
           this.getMailCcList();
        }
    }

    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitEditDivisible', false, '');
            this.popUpList = {
                emailId: '',
                emailName: '',
                emailAddress: '',
                paging: {
                    currentPage: 1,
                    pageSize: 50,
                    total: 0,
                }
            }
        }
    }

    // 获取列表
    getMailCcList() {
        this.$axios.post('/notice/monitor/rule/mailCc/list', {...this.popUpList}).then((res: any) => {
            if (res) {
                this.editCheckVisible = false;
                this.userList = [];
                res.list.forEach(item => this.userList.push(item));
                this.popUpList.paging.total = res.total;
            }
        });    
    }

    handleClistQuery(param) {
        
    }
    // 多选
    clauseChangeEvent(checked, row, rowIndex) {
        this.multipleitem = [];
        checked.forEach(item => this.multipleitem.push(item));
    }
    handleBtn(param1, param2) {
        this.title = param1;
        if (param1 == '新增') {
            this.editCheckVisible = true;
        } else if (param1 == '删除') {
            this.handleRemove('', '批量删除')
        } else if (param1 == '查询') {
            this.editCheckVisible = true;
        } else if (param1 == '编辑') {
            this.editCheckVisible = true;
            this.popUpList.emailId = param2.emailId;
            this.popUpList.emailName = param2.emailName;
            this.popUpList.emailAddress = param2.emailAddress;
        }
    }
    handleEditCheck(param) {
        if (param == 'comfirm') {
            if (this.popUpList.emailName == '' && this.title != '查询') {
                this.yh_message_warn('名称不可为空！')
                return
            }
            if (this.popUpList.emailAddress == '' && this.title != '查询') {
                this.yh_message_warn('邮箱地址不可为空！')
                return
            }
            const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
            if (!emailReg.test(this.popUpList.emailAddress) && this.title != '查询') {
                this.yh_message_warn('邮箱地址格式有误！')
                return
            }
            if (this.title == '新增') {
                this.$axios.post('/notice/monitor/rule/mailCc/add', {
                    emailName: this.popUpList.emailName,
                    emailAddress: this.popUpList.emailAddress,
                }).then((res: any) => {
                    this.editCheckVisible = false;
                    this.popUpList.emailId = '';
                    this.popUpList.emailName = '';
                    this.popUpList.emailAddress = '';
                    this.popUpList.paging.currentPage = 1;
                    this.popUpList.paging.pageSize = 50;
                    this.getMailCcList();
                    this.yh_message_success('新增成功！');
                }); 
            } else if (this.title == '查询') {
                this.popUpList.paging.currentPage = 1;
                this.popUpList.paging.pageSize = 50;
                this.getMailCcList();
            } else if (this.title == '编辑') {
                this.$axios.post('/notice/monitor/rule/mailCc/update', {
                    emailId: this.popUpList.emailId,
                    emailName: this.popUpList.emailName,
                    emailAddress: this.popUpList.emailAddress,
                }).then((res: any) => {
                    this.editCheckVisible = false;
                    this.popUpList.emailId = '';
                    this.popUpList.emailName = '';
                    this.popUpList.emailAddress = '';
                    this.getMailCcList();
                    this.yh_message_success('编辑成功！')
                }); 
            }    
        } else if (param == 'cancel') {
            this.editCheckVisible = false;
            if (this.title != '查询') {
                this.popUpList.emailId = '';
                this.popUpList.emailName = '';
                this.popUpList.emailAddress = '';    
            }
        }
    }
    handleRemove(param1, param2) {
        let data = [];
        if (param2 == '单个删除') {
            data.push(param1.emailId)
        } else if (param2 == '批量删除') {
            this.multipleitem.forEach(item => {
                data.push(item.emailId)
            })
        }
        this.$axios.post('/notice/monitor/rule/mailCc/delete', data).then((res: any) => {
            this.editCheckVisible = false;
            this.yh_message_success('删除成功！');
            this.getMailCcList();
        });  
    }
     // 分页
    private pageRet(): void {
        // this.popUpList.paging.currentPage = this.groupPage.currentPage;
        // this.popUpList.paging.pageSize = this.groupPage.pageSize;
        this.getMailCcList();
    }
}
</script>
<style lang="scss" scoped>
</style>
